<template>
  <div>
    <div class="item" v-for="item in datas" :key="item.ID">
      <h3 class="header">{{ item.title }}</h3>
      <p class="content">{{ item.content }}</p>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import axios from 'axios';

export default defineComponent({
  setup() {
    const datas = ref([]); //能响应的数组（人话版：改了会自动更新HTML的数组）

    axios('/datas.json').then((res) => {
      //1-ref需要.value，它本质上是一个reactive({value})
      //2-把老数据+新数据合并为一个新的数组
      datas.value = [...datas.value, ...res.data];
    });

    return {
      datas //输出到页面中使用
    };
  }
});
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
} /* scoped-局部样式 */
.item {
  box-sizing: border-box;
  width: 350px;
  height: 180px;
  padding: 20px 20px;
  background: #fff;
  border: 1px solid #ccc;
  margin-bottom: -1px; /* 上下边框合并一下 */
}
.header {
  /* margin-bottom: 20px; */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 30px;
}
.content {
  color: #999;
  font-size: 14px;
  line-height: 26px;
  height: 78px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
}
</style>
